<template>
    <div id="login">
        <div class="frame">
            <div class="left-box box">
 <!-- 左侧面板可以添加图片或其他内容 -->
            </div >
            <div class="right-box box">
                <LoginInput />
            </div>
        </div>

    </div>
</template>

<script>
import LoginInput from '@/components/LoginInput.vue'
export default {
    name: 'LoginViews',
    components: {LoginInput},
    
}

</script>

<style>
#login {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    /*background: linear-gradient(135deg, #667eea, #764ba2); !* 深蓝到紫 *!*/
    background: linear-gradient(135deg, #00c9ff, #92fe9d); /* 渐变绿蓝色 *!*/
    /*background: linear-gradient(135deg, #00c9ff, #92fe9d); !* 渐变红橙色（温暖风格）*!*/
    /*background: linear-gradient(135deg, #42275a, #734b6d); !* 紫罗兰 *!*/
    z-index: 9999;
    overflow: hidden;
    display: flex;
    justify-content: center; /* 水平居中 */
    align-items: center; /* 垂直居中 */
}

.frame {
    width: 50%;
    height: auto; /* 高度自适应 */
    min-height: 600px;
    min-width: 1000px;
    border-radius: 40px;
    background-color: rgba(255, 255, 255, 0.2);
    border: 1px solid white;
    box-sizing: border-box;
    display: flex;
    justify-content: center;
    align-items: stretch;
    text-align: center;
}


.box {
    flex: 1 1 50%;
    box-sizing: border-box;
}

.left-box {
    background-color: #00c9ff;
    flex: 1;
    border-top-left-radius: 40px;
    border-bottom-left-radius: 40px;
}

.right-box {
    background-color: red;
    flex: 1;
    border-top-right-radius: 40px;
    border-bottom-right-radius: 40px;
}
</style>